<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    @Author 硕鼠
    @Date 2020/4/7 11:33
    @Version 1.0
    @Description DOM中对于节点测试
  -->
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var oUi = document.getElementById("ul1");
            // alert(oUi.childNodes.length) //IE6-8没问题
            // for (var i = 0;i < oUi.childNodes.length;i++){
            //     // nodeType ==3表示文本节点（空白部分）
            //     //nodeType == 1元素节点<li></li>
            //     // alert(oUi.childNodes[i].nodeType);
            //     if (oUi.childNodes[i].nodeType == 1){
            //         oUi.childNodes[i].style.background = 'red';
            //     }
            // }
            //children只包含元素，不包含节点，兼容。
            for (var i = 0;i < oUi.children.length;i++){
                if (oUi.children[i].nodeType == 1){
                    oUi.children[i].style.background = 'red';
                }
            }
        };
    </script>
</head>
<body>
<ul id="ul1">
    <li></li>
    <li></li>
</ul>
</body>
</html>